<template>
  <div class="template2">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">用户列表
        </div>
        <el-form :inline="true" size='mini' :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item prop="realName">
            <el-input v-model="formInline.realName" placeholder="姓名" style="width:100px"></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input  v-model="formInline.phone" placeholder="手机号" style="width:110px"></el-input>
          </el-form-item>
          <!-- <el-form-item prop="lable">
            <el-input  v-model="formInline.lable" placeholder="标签" style="width:110px"></el-input>
          </el-form-item> -->
          <el-form-item prop="entryTime">
            <el-date-picker size="mini" style="width:200px;" clearable v-model="formInline.entryTime" type="daterange" placeholder="交易时间" value-format="yyyy-MM-dd"  start-placeholder="开始日期"  end-placeholder="结束日期" > </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height:100%">
        <operateList></operateList>
      </el-main>
      <el-footer id="foot">
        <el-pagination size="mini" background  layout="total,sizes,prev, pager, next" @size-change="sizeChange" @current-change="page" :total="listNum" :current-page='formInline.page' :page-sizes="[20, 30, 50, 100]"></el-pagination>
      </el-footer>
    </el-container>
    <editOperate></editOperate>
  </div>
</template>
<script> 
import operateList from './operateList.vue'
import editOperate from './editOperate.vue'
export default {
  data() {
    return {
      height: 0,
      formInline: {
        realName: "",
        phone: "",
        entryTime: "",
        size:20,
        page:1
      },
      listNum:10
    };
  },
  created() {
    this.$root.$on("operate",data=>{
      this.listNum=data
    })
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() {   //搜索查询
      let obj =this.formInline
      obj.page=1
      let data={
        realName: obj.realName,
        phone: obj.phone,
        size:obj.size,
        page:obj.page,
      }
      if(obj.entryTime[0] && obj.entryTime[1]){
        data.startDate=obj.entryTime[0]
        data.endDate=obj.entryTime[1]
      }
      console.log(data)
      this.$root.$emit('operateList',data)
    },
    pedestalList(){
      this.$root.$emit("pedestalList",'no')
    },
    page(e){ //页码
      // console.log(e)
      let obj=this.formInline
      obj.page=e
      this.$root.$emit('page',obj)
    },
    sizeChange(e){ //每页数量
      let obj=this.formInline
      obj.page=1
      obj.size=e
      this.formInline=obj
      this.$root.$emit('sizeChange',obj)
    }
  },
  mounted() {
    let height = `${document.documentElement.clientHeight}`;
    let headH = document.getElementById("head1").offsetHeight;
    let footH = document.getElementById("foot").offsetHeight;
    console.log(headH)
    this.height = parseInt(height) - (headH + footH+62);
  },
  components:{
    operateList,
    editOperate
  },
};
</script>
<style scoped lang="less">
@import "../template2.less";
</style>
